aside {
  background: $gray;
  padding: 8px 24px;
  margin-bottom: 20px;
  border-radius: 2px;
  display: block;
  line-height: 32px;
  font-size: 16px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  color: $primary;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  a {
    color: $light-blue;
    cursor: pointer;

    &:hover {
      color: $info-blue;
    }
  }
}

//main-container
.app-container {
  padding: 8px;
  background-color: $gray;
  overflow: auto;
  height: calc(100vh - 50px);
}
.dashboard-container{
  padding:8px;
  background-color: $gray;
  overflow: auto;
  height: calc(100vh - 50px);
  .el-card{ margin-bottom: 8px;}
}
.card-h-100{
  height:calc(100vh - 66px);
  overflow: auto;
}
.components-container {
  margin: 30px 50px;
  position: relative;
}

.pagination-container {
  padding-top: 8px;
  .el-pagination{ 
    text-align: right;
    padding-right: 0 !important;
    padding-left: 0 !important;
    .el-pagination__sizes{ margin-right:0 !important;}
    .el-select .el-input{ margin-right:0 !important;}
  }
}

.sub-navbar {
  height: 50px;
  line-height: 50px;
  position: relative;
  width: 100%;
  text-align: right;
  padding-right: 20px;
  transition: 600ms ease position;
  background: linear-gradient(90deg, rgba(32, 182, 249, 1) 0%, rgba(32, 182, 249, 1) 0%, rgba(33, 120, 241, 1) 100%, rgba(33, 120, 241, 1) 100%);

  .subtitle {
    font-size: 20px;
    color:$white;
  }

  &.draft {
    background: $primaryText;
  }

  &.deleted {
    background: $primaryText;
  }
}

.link-type,
.link-type:focus {
  color: $light-blue;
  cursor: pointer;

  &:hover {
    color: $info-blue;
  }
}

.filter-container {
  padding-bottom: 8px;

  .filter-item {
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 8px;
  }
}

//refine vue-multiselect plugin
.multiselect {
  line-height: 16px;
}

.multiselect--active {
  z-index: 1000 !important;
}
//dialog - style
.fixed-dialog-height{
  .el-dialog{
    height:90%;
    margin-top: 5vh !important;
    .el-dialog__body{
      overflow: auto;
      height:calc(100% - 98px);
    }
  }
}
.select-dialog{
  .el-dialog__header{     
    border-bottom: 3px solid $gray;
    padding-top: 10px !important;
    .el-dialog__headerbtn{ top:13px !important;}
  }
  .el-dialog__body{
    padding:20px 20px !important;
    .app-container{ height:100%; background-color: transparent; padding:0;}
    .table-app-container{
      .fixed-table{ background-color: transparent; border:0; padding:0; box-shadow: none;}
    }
  }
  .el-dialog__footer{
    border-top: 3px solid $gray;
    padding-bottom: 10px !important;
  }
}
.second-dialog-height{
  height:80%;
  margin-top: 5vh !important;
  .el-dialog__body{
    overflow: auto;
    height: calc(100% - 98px);
  }
}
//drawer - style
.select-drawer{
  .el-drawer__header{
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    border-bottom: 3px solid $gray;
    margin-bottom: 0 !important;
  }
  .el-drawer__body{
    padding:20px 20px 61px 20px !important;
    overflow: auto;
    height: 100%;
    .drawer-footer{
      width: 100%;
      position: absolute;
      right: 0;
      bottom: 0;
      padding: 10px 20px;
      text-align: right;
      background-color:$white;
      border-top: 3px solid $gray;
    }
  }
}
//anchor
.anthor{ 
  padding-left: 120px;
  .anthor-info{
    & > div{
      .anthor-info-head{
      display: flex;
      align-items: center; 
      padding: 15px 0; 
      border-bottom: 1px solid $--border-color-lighter;
      & > span{font-weight: bold; padding-left: 4px;}
      & > div{flex:1; text-align: right;}
	  }
      .anthor-info-body{ padding: 15px 0;}
    }
  }
  .anchor-wrapper{
    position: absolute;
    top:0;
    left:0;
    z-index:9999;
    .anchor-item-wrapper{
      position: relative;
      color: $subText;
      cursor: pointer;
      &:before, &:after{
        content: '';
        display: block;
        position: absolute;
        left: 17px;
        width: 1px;
        height: 14px;
        background: $--border-color-light;
      }
      &:before{
        top: 0;
      }
      &:after{
        bottom: 0;
      }
      &.is-active{
        color: $--color-primary;
      }
      .anchor-circle{
        position: absolute;
        top: 50%;
        left: 14px;
        transform: translateY(-50%);
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: $--border-color-light;
      }
      .anchor-title{
        padding: 8px 20px 8px 36px;
      }
    }
    .acitve-anchor-circle{
      position: absolute;
      transform: translateY(-50%);
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: $--color-primary;
    }
  }
}
//card
.oneCard{
  border-top:3px solid $--color-primary;
  cursor: pointer;
  .el-card__body{
    & > div{
      display: flex;
      align-items: flex-top;
      & > div:first-child{ 
        flex: 1;
        .el-link{
          .el-link--inner{
            font-size: 24px; font-weight: bold; padding-bottom: 4px;
          }
        }
        .el-link.el-link--info{ color:$subText;}
        //& > h1{ font-size: 24px; color:$subText; font-weight: bold; padding-bottom: 4px;}
        & > h2{ font-size: 12px; color:$infoText;}
      }
      & > div:last-child{
         width:auto;
         .svg-icon{ font-size:35px; color:$primaryText;}
      }
    }
  }
}
//表单下的富文本
.richWraper table{ width: 100% !important; }
.statusClass{
  display: block;
  margin-left: -8px;
  padding-left: 8px;
}
//表单查看
.form-view{
  .el-form-item {
    .el-form-item__content{ background-color: $viewgray; padding-left: 8px; font-size:12px;}
  }
}
//el-input__prefix
.fix-input-prefix{
  .el-input__inner{ padding-left: 15px;}
  .el-input__prefix{
    left:0;
    text-align:left;
    & > div{
      border: 1px solid $--border-color-light;
      background-color: $white;
      padding:0 5px;
      .el-tag{ margin-right: 5px;}
      .el-tag:last-child{ margin-right: 0;}
    }
  }
}
.fix-input-prefix2{
  position: relative;
  border: 1px solid $--border-color-light;
  border-top:0;
  background-color: $white;
  padding:0 30px 0 5px;
  line-height: 1.8;
  .el-tag{ margin-right: 5px;}
  .el-tag:last-child{ margin-right: 0;}
  & > i{
    color: $primaryText;
    font-size: 8px;
    font-weight: bold;
    position: absolute;
    right: 10px;
    top: 40%;}
  & > i:hover{ color:$red; cursor: pointer;}
}

/* FullCalendar */
.calender-wraper{
  background-color: $white;
  border: 1px solid $--border-color-lighter;
  padding: 8px;
}
.fc-toolbar button{ outline: 0;}
.filterDialog{
      position: absolute;
      right: 12px;
      left: auto;
      margin: 0;
  }
.fc-bgevent{
  background:red;
}
.fc-day-header /deep/ span{
  color:#575657;
  height: 40px;
  font-size:15px;
}
.fc-day-top .fc-day-number{
  font-size: 18px;
  color:#000000;
  display: block;
  margin-top:8px;
  margin-right:20px;
}
.fc-day-top .fc-day-cnDate{
  display: block;
  color: #999;
  font-size:14px;
  margin-left:20px;
  position: absolute;
  top:13px;
}
.fc-day-top .fc-day-cnTerm{
  color: #999;
  font-weight: bold;
  font-size: 14px;
  position: absolute;
  margin-left:20px;
  top:13px;
  width: 100px;
  background-color: #fff;
}
.fc-sun .fc-day-number{
  color:#D9534F;
}
.fc-sat .fc-day-number{
  color:#D9534F;
}
.fc-widget-header .fc-sun span{
  color:#D9534F;
}
.fc-widget-header .fc-sat span{
  color:#D9534F;
}
.fc-event-container.fc-event {
  background: #428BCA;
  border:none;
}
.fc-toolbar .fc-header-toolbar.fc-right.fc-button-group{
  display: none;
}
.fc-left,.fc-right {
  border-radius: 2px;
  overflow: hidden;
  border: 1px solid rgba(128, 128, 128, 0.5);
}
button.fc-today-button,button.fc-myFilter-button {
  border: none;
}
.fc-center {
  // border-radius: 5px;
  border: none;
  // border-bottom: 1px solid  rgba(128, 128, 128, 0.1);
  // transform:scaleY(.5);
  overflow: hidden;
}

.fc-toolbar .fc-center{
  font-size: 2em;
}
.fc-toolbar .fc-center > h2{ font-size:15px; padding:4px 10px 0 10px;line-height: 22px;}
.fc-center .fc-prevYear-button{ font-size:14px; margin: 0 -1px 0 0;border: none;} /* 上一年*/
.fc-center .fc-prev-button{ font-size:14px; margin: 0 -1px 0 0;border: none;} /* 上一月 */

.fc-center .fc-next-button{ font-size:14px; margin: 0 -1px 0 0;border: none;} /* 下一月*/
span.fc-icon-left-single-arrow,span.fc-icon-right-single-arrow{
  font-size: 12px;
  height: 16px;
  line-height: 16px;
}
.fc-center .fc-nextYear-button{ font-size:14px; margin: 0 -1px 0 0;border: none;} /* 下一年 */
.fc .fc-toolbar>*>*{ margin-left: 0 !important;}
.fc-state-default.fc-corner-right{ border-radius: 0 !important;}
.fc-state-default.fc-corner-left{ border-radius: 0 !important;}
.fc-state-default{
  background-color:#fff !important;
  background-image:none !important;
  text-shadow:none !important;
  box-shadow: none !important;
}
.fc-state-disabled{
  opacity:0.5;
}

.fc-head-container.fc-widget-header{
  border:none;
}
.fc-day-header.fc-widget-header {
  height: 26px;
  border:none;
}

.fc-day-header.fc-widget-header > span {
  font-weight: 400;
}

/*自定义标题*/
.form-info-title{
  display: flex;
  align-items: center;
  padding: 15px 0;
  margin-bottom: 15px;
  border-bottom: 1px solid $--border-color-lighter;
  & > span{font-weight: bold; padding-left: 4px;}
  & > div{flex:1; text-align: right;}
}
/*自定义表格*/
.self-table{
  width: 100%;
  border-collapse: collapse;
  border:1px solid $--border-color-lighter;
}
.self-table > thead > tr > th,.self-table > tbody > tr > td{
  padding: 10px;
  border:1px solid $--border-color-lighter;
}

.el-card{
  border-radius: 2px !important;
}